<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="30%"
    @close="handleClose"
  >
    <el-form
      :model="formParams"
      :label-position="'top'"
      class="demo-form-inline"
    >
      <el-form-item label="音频地址">
        <el-input v-model="formParams.url" placeholder="音频地址" clearable />
      </el-form-item>
      <el-form-item label="请输入书面地址">
        <el-input
          v-model="formParams.poster"
          placeholder="请输入书面地址"
          clearable
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="SubmitBtn"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script name="networkModel" setup>
import { toRaw } from 'vue'

const props = defineProps({
  // 弹出框是否显示
  dialogParam: {
    required: true
  }
})
const data = reactive({
  dialogVisible: false,
  title: '',
  formParams: {
    url: null,
    poster: null
  }
})
const { dialogVisible, title, formParams } = toRefs(data)
watch(
  () => props.dialogParam,
  val => {
    if (JSON.stringify(props.dialogParam) != '{}') {
      init()
    }
  },
  {
    deep: true,
    immediate: true
  }
)
async function init() {
  dialogVisible.value = props.dialogParam.isVisible
  title.value = props.dialogParam.title
}
const emit = defineEmits(['ok', 'close'])
const SubmitBtn = () => {
  dialogVisible.value = false
  const datas = JSON.parse(JSON.stringify(formParams.value))
  emit('ok', {
    type: 'audioNetwork',
    data: datas
  })
}
const handleClose = () => {
  formParams.value = {}
  dialogVisible.value = false
  emit('close', false)
}
</script>
